<template>
<div class="menu-mgt-container" v-loading="loading">
	<el-tabs>
		<el-tab-pane :label="translate('label.menuPc')">
			<menuPane :data="menuListPc" :deviceType="DeviceEnum.pc" @success="successPc"/>
		</el-tab-pane>
		<el-tab-pane v-if="data.mobile" :label="translate('label.menuMobile')">
			<menuPane :data="menuListMobile" :deviceType="DeviceEnum.mobile" @success=""/>
		</el-tab-pane>
	</el-tabs>
</div>
</template>
<script lang="ts">
import {Component} from "vue-property-decorator";
import BaseVue from '@/common/base-vue'

import MenuMgtService from '@/views/system/menu-mgt/menu-mgt.service';
import ResponseModel from '@/common/model/response.model';

//新增编辑组件
import menuPane from '@/views/system/menu-mgt/menu-pane';
import {DeviceEnum} from "./enum/menu-mgt.enum";
import {UserGetterEnum} from "@/store/enum/store.enum";

@Component({components: {menuPane}})
export default class MenuMgt extends BaseVue {

	/*菜单类型枚举*/
	private DeviceEnum=DeviceEnum;

	/*数据加载loading*/
	public loading = false;

	/*总数据*/
	public data={};
	/*pc菜单列表*/
	public menuListPc = [];

	/*移动端菜单列表*/
	public menuListMobile = [];

	/*
	 *生命周期created
	 */
	public created(){
	};

	/*
	 *生命周期mounted
	 */
	public mounted() {
		this.getMenuList();
	};

	/**
	 * 获取菜单列表
	 */
	public getMenuList(update?:boolean) {
		this.loading = true;
		MenuMgtService.getMenuList().then((res:ResponseModel) => {
			if (res.status === 200) {
				this.menuListPc = res.data.pc;
				this.menuListMobile = res.data.mobile;
				this.data=res.data;

				//如果是更新菜单
				if(update){
					this.$store.commit(UserGetterEnum.updateMenuList,res.data.pc);
				}
			}
		}).finally(()=>{
			this.loading = false;
		})
	};

	/**
	 *保存成功
	 */
	public successPc(){
		this.getMenuList(true);
	}
};
</script>
<style lang="scss" scoped>
.menu-mgt-container {
	overflow: auto;

	.el-scrollbar__wrap {
		overflow-x: hidden;
	}

	.el-scrollbar {
		margin-top: 8px;
		border: 1px solid #d3d3d3;
	}

	.menu-tree {
		/*border: 1px solid #ececec;*/
		margin: 1px;

		::v-deep.el-tree-node__content {
			height: 42px;
			border-bottom: 1px solid #eeeeee;
		}

		.custom-tree-node {
			font-size: 14px;
			padding-right: 8px;
			height: 34px;
			line-height: 34px;
			width: 100%;

			.operation-btn {
				margin-top: -3px;
				margin-left: 5px;

				&:first-of-type {
					margin-left: 15px;
				}
			}

			.tree-node-icon {
				margin-right: 5px;
			}

			&.new {
				color: $base-color-blue;
			}
		}
	}

	.footer-btn-container {
		text-align: right;
		padding: 20px 0;
	}
}

:focus {

	outline: 0;
}
</style>
